import { CACHE_KEY, EVENT_TYPE, getCache } from '@/utils';
import {
  HeartOutlined,
  HomeOutlined,
  InfoCircleFilled,
  SettingOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { Card, Col, Divider, Empty, Row, Statistic } from 'antd';
import React, { useEffect } from 'react';
import { io } from 'socket.io-client';

const warnListData = new Array(8).fill(1).map((item, index) => {
  return { title: `A${index} 监控门告警` };
});

const toolListData = new Array(8).fill(1).map((item, index) => {
  return {
    title: `监控${index + 1}`,
    icon: <VideoCameraOutlined width={20}></VideoCameraOutlined>,
  };
});

const toolListData2 = new Array(8).fill(1).map((item, index) => {
  return {
    title: `巡视${index + 1}`,
    icon: <VideoCameraOutlined width={20}></VideoCameraOutlined>,
  };
});

const toolListData3 = new Array(8).fill(1).map((item, index) => {
  return {
    title: `会见室${index + 1}`,
    icon: <HomeOutlined width={20}></HomeOutlined>,
  };
});

const toolListData4 = new Array(8).fill(1).map((item, index) => {
  return {
    title: `嫌疑人${index + 1}`,
    icon: <HeartOutlined width={20}></HeartOutlined>,
  };
});

const Admin: React.FC = () => {
  const [close, setClose] = React.useState(false);
  const [task, setTask] = React.useState(getCache(CACHE_KEY.TASK_LIST) || []);
  console.log('[task]', task);

  useEffect(() => {
    const socket = io('wss://zkapi.lvseguanjia.cn:16064', {
      ackTimeout: 10000,
      retries: 3,
      auth: {
        serverOffset: 0,
      },
      port: 3000,
    });
    console.log('😈初始化socket');
    // currentSocket.current = socket;

    socket.on(EVENT_TYPE.BEGIN_ADD_TASK, () => {
      setTimeout(() => {
        setTask(getCache(CACHE_KEY.TASK_LIST) || []);
      }, 1000);
    });
  }, []);
  return (
    <PageContainer>
      <Row gutter={20}>
        <Col span={16}>
          <Row gutter={[20, 20]}>
            <Col span={12}>
              <Card
                title={
                  <div className="flex-bt">
                    <div>监所人员分布</div>
                    <div
                      onClick={() => {
                        setClose(true);
                      }}
                    >
                      关闭
                    </div>
                  </div>
                }
              >
                <Row className="w100 cfff">
                  <Col flex={1}>
                    <Statistic title="在押人员" value={2000}></Statistic>
                  </Col>
                  <Col flex={1}>
                    <Statistic title="重点人员" value={100}></Statistic>
                  </Col>
                  <Col flex={1}>
                    <Statistic title="重症人员" value={8}></Statistic>
                  </Col>
                </Row>
              </Card>
            </Col>
            <Col span={12}>
              <Card
                title={
                  <div className="flex-bt">
                    <div>日常工作</div>
                    <div
                      onClick={() => {
                        setClose(true);
                      }}
                    >
                      关闭
                    </div>
                  </div>
                }
              >
                <Row className="w100 cfff">
                  <Col flex={1}>
                    <Statistic title="日常待处理" value={1500}></Statistic>
                  </Col>
                  <Col flex={1}>
                    <Statistic title="提审待处理" value={100}></Statistic>
                  </Col>
                </Row>
              </Card>
            </Col>
            <Col span={12}>
              <Card
                title={
                  <div className="flex-bt">
                    <div>智慧安防</div>
                    <div
                      onClick={() => {
                        setClose(true);
                      }}
                    >
                      关闭
                    </div>
                  </div>
                }
              >
                <Row gutter={[10, 10]}>
                  {toolListData.map((item, index) => (
                    <Col span={6} key={index} className="flex-center gap5">
                      <div className="label">{item.title}</div>
                      <div className="icon">{item.icon}</div>
                    </Col>
                  ))}
                </Row>
              </Card>
            </Col>
            <Col span={12}>
              <Card
                title={
                  <div className="flex-bt">
                    <div>智慧巡视</div>
                    <div
                      onClick={() => {
                        setClose(true);
                      }}
                    >
                      关闭
                    </div>
                  </div>
                }
              >
                <Row gutter={[10, 10]}>
                  {toolListData2.map((item, index) => (
                    <Col span={6} key={index} className="flex-center gap5">
                      <div className="label">{item.title}</div>
                      <div className="icon">{item.icon}</div>
                    </Col>
                  ))}
                </Row>
              </Card>
            </Col>
            <Col span={12}>
              <Card
                title={
                  <div className="flex-bt">
                    <div>提讯会见</div>
                    <div
                      onClick={() => {
                        setClose(true);
                      }}
                    >
                      关闭
                    </div>
                  </div>
                }
              >
                <Row gutter={[10, 10]}>
                  {toolListData3.map((item, index) => (
                    <Col span={6} key={index} className="flex-center gap5">
                      <div className="label">{item.title}</div>
                      <div className="icon">{item.icon}</div>
                    </Col>
                  ))}
                </Row>
              </Card>
            </Col>
            {!close && (
              <Col span={12}>
                <Card
                  title={
                    <div className="flex-bt">
                      <div>健康监测</div>
                      <div
                        onClick={() => {
                          setClose(true);
                        }}
                      >
                        关闭
                      </div>
                    </div>
                  }
                >
                  <Row gutter={[10, 10]}>
                    {toolListData4.map((item, index) => (
                      <Col span={6} key={index} className="flex-center gap5">
                        <div className="label">{item.title}</div>
                        <div className="icon">{item.icon}</div>
                      </Col>
                    ))}
                  </Row>
                </Card>
              </Col>
            )}
            <Col span={12}>
              <div
                className="flex-center"
                style={{ minHeight: 200, height: '100%', borderRadius: 8, background: '#FFF' }}
              >
                <SettingOutlined size={64} style={{ fontSize: 64 }} />
              </div>
            </Col>
          </Row>
        </Col>
        <Col span={8}>
          {/* // <List.Item>
                //   <List.Item.Meta
                //     avatar={
                //       <Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />
                //     }
                //     title={<a href="https://ant.design">{item.title}</a>}
                //     description="Ant Design, a design language for background applications, is refined by Ant UED Team"
                //   />
                // </List.Item> */}
          <Card title="待办任务">
            {task?.length === 0 && <Empty description="暂无数据"></Empty>}
            {task?.length > 0 &&
              task?.map((item, index) => {
                return (
                  <div>
                    <h2 className="flex-aic">
                      <InfoCircleFilled></InfoCircleFilled>
                      <div className="ml10">{item.title}</div>
                    </h2>
                    <div className="mt10">{item.time}</div>
                    <div className="mt10">{item.content}</div>
                    {index !== task.length - 1 && <Divider></Divider>}
                  </div>
                );
              })}
            {/* <List
              itemLayout="horizontal"
              dataSource={warnListData}
              renderItem={(item, index) => <Empty description="暂无数据"></Empty>}
            /> */}
          </Card>
        </Col>
      </Row>
    </PageContainer>
  );
};

export default Admin;
